<template>  
  <div class="hhh" ><!-- v-if="jifengss" -->
        <div class="jftop">
            <van-icon name="arrow-left" class="bbss" @click="jfxxdj" />
            <div class="boxs">兑换商品详情</div>
        </div>
        <div>
            <van-swipe @change="onChange" class="lbsss">
                <van-swipe-item><img :src="jifengss.lb1" alt=""></van-swipe-item>
                <van-swipe-item><img :src="jifengss.lb2" alt=""></van-swipe-item>
                <van-swipe-item><img :src="jifengss.lb3" alt=""></van-swipe-item>
                <van-swipe-item><img :src="jifengss.lb4" alt=""></van-swipe-item>
                <van-swipe-item><img :src="jifengss.lb5" alt=""></van-swipe-item>
                <template #indicator>
                    <div class="custom-indicator">{{ current + 1 }}/5</div>
                </template>
            </van-swipe>
        </div>
        <div class="neir">
            <p>{{ jifengss.p1 }}</p>
            <p class="neirp1">{{jifengss.p2}}</p>
            <p><span class="jfhy">{{jifengss.p3}} 积分 + {{jifengss.p4}} 元</span><span class="jfjg">{{jifengss.p5}}</span></p>
            <p class="dfx"><img src="//static.asus.com.cn/static/wap/images/exchange/icon_small_4.png" alt=""><span class="jingg">兑换商品不可使用优惠券，不支持7天无理由退换</span></p>
        </div>
        <div>
            <van-cell is-link @click="showPopup">已选：黑 </van-cell>
            <van-popup v-model="show" closeable close-icon-position="top-right" position="bottom" :style="{ height: '50%' }" />
        </div>
        <div>
            <van-cell is-link @click="showPopup">评论区(99+)</van-cell>
            <van-popup v-model="show" closeable close-icon-position="top-right" position="bottom" :style="{ height: '50%' }" />
        </div>
        <div>
            <div class="xxx">
                <img :src="jifengss.img1" alt="">
                <img :src="jifengss.img2" alt="">
                <img :src="jifengss.img3" alt="">
                <img :src="jifengss.img4" alt="">
                <img :src="jifengss.img5" alt="">
                <img :src="jifengss.img6" alt="">
                <img :src="jifengss.img7" alt="">
            </div>
        </div>
        <div class="jfdhd">
            <div class="jflf">
                <div class="xhjfz">消耗积分：<span class="xhjf zzs">{{jifengss.p3}}</span>付款: <span class="xhjf">{{jifengss.p4}}</span></div>
                <div class="ndjf">您的积分： 0</div>
            </div>
            <div class="jfrg" @click="ljdh">立即兑换</div>
        </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Popup } from 'vant';

Vue.use(Popup);
export default {
    data(){
        return{
            jifengss:"",
            current: 0,
            show: false
            
        }
    },
    methods: {
        onChange(index) {
            this.current = index;
        },
        showPopup() {
            this.show = true;
        },
        jfxxdj(){
            this.$router.push("/jifen").catch(err=>err)
        },
        ljdh(){
            this.$router.push({ path: '/duihuan', query: { id1: this.jifengss }}).catch(err=>err)
        }
    },
    mounted(){
        this.jifengss = this.$route.query.id
        this.duihuanarr = this.$route.query.id2 
    },
    watch:{
        '$route':function(){
            this.jifengss = this.$route.query.id
            this.duihuanarr = this.$route.query.id2
        }
    }
}
</script>

<style scoped>
.xxx img{
    width: 100vw;
}
.lbsss img{
    width: 100vw;
}
.dfx{
    margin: 3vw 0 2vw 0;
    display: flex;
}
.neir img{
    width: 5vw;
}
.jingg{
    opacity: 0.5;
    font-size: 3vw;
}
.jfjg{
    opacity: 0.5;
    font-size: 3vw;
    text-decoration: line-through;
}
.jfhy{
    font-size: 5vw;
    color: #ff3d50;
    margin-right: 10vw;
}
.neirp1{
    font-size: 3.5vw;
    opacity: 0.5;
    margin: 2vw 0 3vw 0;
}
.neir{
    padding: 3vw;
}
.zzs{
    margin-right: 3vw;
}
.xhjfz{
    font-size: 4vw;
}
.xhjf{
    color: #ff3d50;
}
.ndjf{
    opacity: 0.5;
    font-size: 3vw;
}
.jfrg{
    width: 30vw;
    height: 14vw;
    background-color: #E1AB66;
    color: #fff;
    font-size: 5vw;
    text-align: center;
    line-height: 14vw;
}
.jflf{
    flex-grow: 2;
    text-align: right;
    line-height: 7vw;
    padding-right: 3vw;
}
.jfdhd{
    width: 100vw;
    height: 14vw;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    background-color: #fff;
}
.jftop{
    width: 100vw;
    height: 13vw;
    background-color: #FFF;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
.jftop .boxs{
    width: 50vw;
    height: 13vw;
    text-align: center;
    line-height: 13vw;
}
.bbss{
    width: 20vw;
    height: 8vw;
    font-size: 6vw;
    padding: 4vw 0 0 4vw;
    opacity: 0.3;
}
.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(61, 58, 58, 0.1);
    color: #fff;
  }
  .lbsss{
    height: 100vw;
    background-color: #fff;
    margin-top: 13vw;
  }
  .hhh{
    background-color: f7f7f7;
  }
</style>